<div class="page-content">
    <div class="page-header position-relative">
        <h1>
            Danh sách thành viên !
        </h1>
    </div>
    <div id="main-div">
        <form method="post" id="user" name="user">
            <div id="post">
                <!-- Table  -->
                <div id="sample-table-2_wrapper" class="dataTables_wrapper" role="grid">
                    <div class="row-fluid"><div class="span6"><div id="sample-table-2_length" class="dataTables_length"><label>Hiện thị <select size="1" name="sample-table-2_length" aria-controls="sample-table-2" id="selected_user"><option value="8" selected="selected">8</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> Thành viên</label></div></div><div class="span6"><div class="dataTables_filter" id="sample-table-2_filter"><label>Tìm kiếm: <input type="text" aria-controls="sample-table-2"></label></div></div></div>
                    <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th class="center">
                                <label>
                                    <input type="checkbox">
                                    <span class="lbl"></span>
                                </label>
                            </th>
                            <th>User name</th>
                            <th>Email</th>
                            <th class="hidden-480">Nhóm</th>
                            <th class="hidden-phone">Avatar</th>
                            <th class="hidden-480">Điện thoại</th>
                        </tr>
                        </thead>

                        <tbody>
                        <?php
                        foreach($data as $value){
                            ?>
                            <tr class="">
                                <td class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td><a class="tag" href="<?php echo base_url(); ?>admin/profile/<?php echo $value['UserId']; ?>"><?php echo $value['UserName']; ?></a></td>
                                <td>
                                    <?php echo $value['Email']; ?>
                                </td>
                                <td class="hidden-480">
                                    <?php
                                    foreach($group as $g){
                                        if($g['GroupId'] == $value['GroupId']){
                                            echo $g['GroupName'];
                                        }
                                    }
                                    ?>
                                </td>
                                <td class="hidden-phone">
                                    <?php echo $value['Avatar']; ?>
                                </td>

                                <td class="hidden-480"><?php echo $value['PhoneNumer']; ?></td>


                            </tr>
                        <?php
                        }
                        ?>
                        </tbody>
                    </table>
                </div>
                <div id="pagination">
                    <ul>
                        <?php
                        for($i=1; $i<= $numberPage; $i++){
                            if($i == 1){
                                echo '<li onclick="selected(this)" pid="'.$i.'" title="Trang '.$i.'" class="page-selected">'.$i.'</li>';
                            }else{
                                echo '<li onclick="selected(this)" pid="'.$i.'" title="Trang '.$i.'">'.$i.'</li>';
                            }
                        }
                        ?>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    //function ajax loading data pagination
    function selected(obj){
        obj = $(obj);
        $('#pagination').find('.page-selected').removeClass('page-selected');
        obj.addClass('page-selected');

        var page = obj.attr('pid');
        var per_page = $('#selected_user').val();
        table = $('#post').find('table');
        $.ajax({
            type:"POST",
            url:"<?php echo base_url(); ?>admin/UserPagination",
            dataType:'json',
            data: {'page': page, 'per_page':per_page},
            success:(function(data){
                if(data.status == "ok"){
                    var tableHeader = "";
                    tableHeader += '<tr>';
                    tableHeader += '<th class="center">';
                    tableHeader += '<label>';
                    tableHeader += '<input type="checkbox">';
                    tableHeader += '<span class="lbl"></span>';
                    tableHeader += '</label>';
                    tableHeader += '</th>';
                    tableHeader += '<th>User name</th>';
                    tableHeader += '<th>Email</th>';
                    tableHeader += '<th class="hidden-480">Nhóm</th>';
                    tableHeader += '<th class="hidden-phone">Avatar</th>';
                    tableHeader += '<th class="hidden-480">Điện thoại</th>';
                    tableHeader += '</tr>';
                    table.html(tableHeader);
                    for(var i =0; i<data.pages.length; i++){

                        var id = data.pages[i].UserId;
                        var user_email = data.pages[i].Email;
                        var user_name = data.pages[i].UserName;
                        var user_level = data.pages[i].GroupId;
                        var user_avatar = data.pages[i].Avatar;
                        var user_phone = data.pages[i].PhoneNumer;

                        var group_name = "";
                        for(var j =0; j<data.group.length; j++){
                            if(user_level == data.group[j].GroupId){
                                group_name = data.group[j].GroupName;
                            }
                        }

                        var tableContent = "";

                        tableContent += '<tr class="">';
                        tableContent += '<td class="center">';
                        tableContent += '<label>';
                        tableContent += '<input type="checkbox">';
                        tableContent += '<span class="lbl"></span>';
                        tableContent += '</label>';
                        tableContent += '</td>';

                        tableContent += '<td><a class="tag" href="<?php echo base_url(); ?>admin/profile/'+id+'">'+user_name+'</a></td>';
                        tableContent += '<td>'+user_email;
                        tableContent += '</td>';
                        tableContent += '<td class="hidden-480">'+group_name;
                        tableContent += '</td>';
                        tableContent += '<td class="hidden-phone">'+user_avatar;
                        tableContent += '</td>';
                        tableContent += '<td class="hidden-480">'+user_phone+'</td>';
                        tableContent += '</tr>';
                        table.append(tableContent);
                    }

                    $('#pagination').find('.page-selected').removeClass('page-selected');
                    obj.addClass('page-selected');
                }
            })
        });
    }
</script>